<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/common.css">
<script src="js/jquery-3.3.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/vue-2.6.12.js"></script>
<script src="js/axios-0.20.0.js"></script>

<!-- 头部 -->
<header id="header">
    <div class="top_banner">
        <img src="images/top_banner.jpg" alt="">
    </div>
    <div class="header_wrap">
        <div class="topbar" style="margin-top: 10px">
            <div class="logo">
                <a href="/"><img src="images/logo.jpg" alt=""></a>
            </div>
            <div class="search">
                <input id="rname" type="text" placeholder="请输入路线名称" class="search_input">
                <a href="javascript:void(0);" class="search-button">搜索</a>
            </div>
            <div class="hottel">
                <div class="hot_pic">
                    <img src="images/hot_tel.jpg" alt="">
                </div>
                <div class="hot_tel">
                    <p class="hot_time">客服热线(9:00-6:00)</p>
                    <p class="hot_num">400-618-9090</p>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- 首页导航 -->
<div class="navitem">
    <ul class="nav" id="categoryUI">
        <li class="nav-active"><a href="index.jsp">首页</a></li>
        <li v-for="(category,index) in categoryList"><a :href="'route_list.jsp?cid='+ category.cid">{{category.cname}}</a></li>

    </ul>
</div>
<script>
    let category_List = new Vue({
        el: "#categoryUI",
        data: {
            categoryList:[],
        },


        methods: {
            findCategoryAll(){
                axios.get("/categoryServlet?action=findCategoryAll").then(resp=>{
                  this.categoryList = resp.data;
                  console.log(this.categoryList)
;
                })
            }
        },
        created() {
            this.findCategoryAll();
        }
    });
</script>